<template>
  <div class="page">
    <h2>采集任务</h2>
    <div class="form">
      <select v-model="selectedTopic">
        <option v-for="t in topics" :key="t.id" :value="t.id">{{ t.topic_name }} ({{ t.topic_id }})</option>
      </select>
      <input v-model="keywords" placeholder="关键词，逗号分隔" />
      <input v-model="timeStart" placeholder="开始时间YYYY-MM-DD" />
      <input v-model="timeEnd" placeholder="结束时间YYYY-MM-DD" />
      <div class="platforms">
        <label v-for="p in platformOptions" :key="p">
          <input type="checkbox" :value="p" v-model="platforms" /> {{ p }}
        </label>
      </div>
      <button @click="onCreate">创建任务</button>
    </div>
    <h3>任务列表</h3>
    <ul>
      <li v-for="t in tasks" :key="t.task_id">
        <span>{{ t.platform }} - {{ t.task_id }} - {{ t.task_status }}</span>
        <button @click="onRun(t.task_id)">执行</button>
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { listTopics, createTasks, listTasks, runTask } from '../../api/social'

const topics = ref<any[]>([])
const selectedTopic = ref('')
const keywords = ref('')
const timeStart = ref('')
const timeEnd = ref('')
const platforms = ref<string[]>([])
const platformOptions = ['weibo','xhs','douyin','kuaishou']
const tasks = ref<any[]>([])

async function load() {
  const resp = await listTopics()
  topics.value = resp.data || []
  const tResp = await listTasks()
  tasks.value = tResp.data || []
}

async function onCreate() {
  if (!selectedTopic.value || platforms.value.length === 0) return
  const ks = keywords.value ? keywords.value.split(',').map(x => x.trim()).filter(Boolean) : []
  await createTasks(selectedTopic.value, { platforms: platforms.value, keywords: ks, time_start: timeStart.value || null, time_end: timeEnd.value || null })
  await load()
}

async function onRun(taskId: string) {
  await runTask(taskId)
  await load()
}

onMounted(load)
</script>
<style scoped>
.page { padding: 16px }
.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px }
.platforms { grid-column: 1 / span 2; display: flex; gap: 12px }
ul { list-style: none; padding: 0 }
li { display: flex; align-items: center; gap: 12px; padding: 8px 0 }
</style>
